<template>
  <section class="slice-item">
    <header>
      <div :class="{ required }" class="label">
        {{ title }}
      </div>
      <div v-if="sum" class="count">{{ count }}/{{ maxCount }}</div>
    </header>
    <slot></slot>
  </section>
</template>

<script lang="ts" setup>
defineProps({
  title: {
    type: String,
  },
  required: {
    type: Boolean,
    default: false,
  },
  count: {
    type: Number,
  },
  maxCount: {
    type: Number,
  },
  sum: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
.slice-item {
  margin-top: 20px;

  header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
  }

  .label {
    display: flex;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    color: var(--grey-color13);
  }

  .label.required {
    &::before {
      width: 6px;
      height: 6px;
      content: '';
      margin-right: 10px;
      border-radius: 50%;
      display: inline-block;
      background-color: var(--pink-color1);
    }
  }

  .count {
    font-size: 16px;
    font-weight: 700;
    color: var(--pink-color1);
  }
}
</style>
